<template>
    <view class="coupon-page">
        <view class="tab-container">
            <view class="tab-section" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
                <text>未使用</text>
                <view class="tab-underline" v-if="currentTab === 0"></view>
            </view>
            <view class="tab-section" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
                <text>已使用</text>
                <view class="tab-underline" v-if="currentTab === 1"></view>
            </view>
            <view class="tab-section" :class="{ active: currentTab === 2 }" @click="switchTab(2)">
                <text>已过期</text>
                <view class="tab-underline" v-if="currentTab === 2"></view>
            </view>
        </view>

        <view class="content-container">
            <view class="empty-state" v-if="currentCoupons.length === 0">
                <image class="empty-icon" src="/static/images/empty-doc.png" mode="aspectFit"></image>
                <text class="empty-text">没有相关信息</text>
            </view>

            <!-- 优惠券列表 -->
            <view class="coupon-list" v-if="currentCoupons.length > 0">
                <!-- 循环渲染卡券 -->
                <view v-for="(coupon) in currentCoupons" :key="coupon.id" class="coupon-item">
                    <view class="coupon-info">
                        <view class="coupon-title">{{coupon.title}}</view>
                        <view class="coupon-price">{{coupon.price}} 元</view>
                    </view>
                    <view class="coupon-details">
                        <view class="coupon-limits" v-if="coupon.status == 1">
                            <view class="limit-item">可用次数: {{coupon.remainTimes || 1}}次</view>
                            <view class="limit-item">可抵时长: {{coupon.duration}} 小时</view>
                            <view class="limit-item">房间类型: {{coupon.roomType}}</view>
                        </view>
                    </view>
                    <view class="coupon-terms">
                        <text class="term-item">适用时段: {{coupon.periodLimit || '全天'}}</text>
                        <text class="term-item">有效期至: {{coupon.expireDate}}</text>
                        <view class="coupon-limits">
                            <view class="term-item">价格: {{coupon.price}}</view>
                            <text v-if="coupon.terms" class="term-item">{{coupon.terms}}</text>
                            <text v-if="coupon.status == 2" class="red-limit-item">已过期</text>
                            <text v-if="coupon.status == 0" class="red-limit-item">已使用</text>
                        </view>
                        <view class="coupon-limits" v-if="coupon.status == 1">
                            <view class="code-item">优惠券码: {{coupon.verifyCode}}</view>
                            <button class="use-btn" v-if="coupon.status == 1" 
                                    @click="goToVoucher(coupon.verifyCode, coupon.id)">去使用</button>
                        </view>
                    </view>
                    
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import api from '@/utils/api.js';

export default {
    data() {
        return {
            currentTab: 0,
            coupons: {
                unused: [],
                used: [],
                expired: []
            }
        }
    },
    computed: {
        currentCoupons() {
            if (this.currentTab === 0) {
                return this.coupons.unused; //未使用
            } else if (this.currentTab === 1) {
                return this.coupons.used; //已使用
            } else {
                return this.coupons.expired; //已过期
            }
        }
    },
    onLoad() {
        // 加载优惠券数据
        this.loadCoupons();
    },
    
    methods: {
        switchTab(index) {
            if (this.currentTab !== index) {
                this.currentTab = index;
                // 切换不同状态的优惠券
            }
        },
        goToVoucher(verifyCode, couponId) {
            uni.navigateTo({
                url: `/pages/voucher/voucher?verifyCode=${verifyCode}&couponId=${couponId}`
            });
        },
        async loadCoupons() {
            try {
                const response = await api.coupon.getUserCoupons(); // 获取当前用户的优惠券
                if (response.success) {
                    // console.log("返回用户优惠卷数据", response.data);
                    // 处理返回的数据，将优惠券按状态分类
                    let res = response.data;
                    //遍历
                    for (let i = 0; i < res.length; i++) {
                        if(res[i].status === 0) { //已使用
                            this.coupons.used.push(res[i]);
                        } else if(res[i].status === 1) { //未使用
                            this.coupons.unused.push(res[i]);
                        } else if(res[i].status === 2) { //已过期
                            this.coupons.expired.push(res[i]);
                        }
                    }
                }
                console.log("返回用户优惠卷数据",  this.coupons);
            } catch (error) {
                console.error('获取用户优惠券列表失败:', error);
            }
        } 
    }
    

}
</script>

<style lang="scss" scoped>
.coupon-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.tab-container {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.tab-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    position: relative;

    text {
        font-size: 16px;
        color: #999;
    }

    &.active {
        text {
            color: #333;
            font-weight: bold;
        }

        .tab-underline {
            width: 40px;
            height: 3px;
            background-color: #7FB992;
            position: absolute;
            bottom: 0;
            border-radius: 2px;
        }
    }
}

.content-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
}

.empty-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    opacity: 0.6;
}

.empty-text {
    color: #999;
    font-size: 14px;
}

.coupon-item {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    margin-bottom: 40rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.coupon-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
}

.coupon-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
    flex: 1;
}

.coupon-price {
    font-size: 32rpx;
    font-weight: 500;
    color: #7FB992;
    white-space: nowrap;
    margin-left: 20rpx;
}

.coupon-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.coupon-limits {
    display: flex;
    gap: 20rpx;
}

.coupon-terms {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
}
.limit-item {
    background-color: rgba(142, 193, 179, 0.1);
    color: #7FB992;
    font-size: 24rpx;
    padding: 8rpx 20rpx;
    border-radius: 8rpx;
}
.code-item {
    background-color: rgba(153, 223, 130, 0.1);
    color: #dc511a;
    font-size: 32rpx;
    padding: 8rpx 20rpx;
    border-radius: 8rpx;
}
.red-limit-item {
    background-color: rgba(220, 77, 79, 0.1);
    color: #c72626;
    font-size: 24rpx;
    padding: 8rpx 20rpx;
    border-radius: 8rpx;
}
.term-item {
    font-size: 24rpx;
    color: #999;
}

.use-btn {
    background-color: #7FB992;
    color: #FFFFFF;
    font-size: 25rpx;
    border-radius: 100rpx;
    padding: 10rpx 40rpx;
    margin: 10;
    min-width: 140rpx; /* 将min-width从30rpx调整为20rpx */
    width: 180rpx; /* 允许宽度自适应 */;
    height: 60rpx;
    text-align: center; /* 水平居中 */
    line-height: 40rpx; /* 垂直居中 */
    left: 80rpx;
}
.coupon-list {
    padding: 20rpx;
}
</style>
